<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>产品详情页面</title>
		<link  rel="stylesheet" type="text/css" href="css/product.css"/>
	</head>
	<body>
		<div class="dingbu">
			<div class="usercenter-head">
				<div class="the_head">
					<div class="head-1">
						<h3>首页</h3>
					</div>
					<div class="head-2">
						<h3>个人中心</h3>
					</div>
					<div class="head-2">
						<h3>收藏夹</h3>
					</div>
					<div class="head-2">
						<h3>卖家中心</h3>
					</div>
					<div class="head-2">
						<h3>联系客服</h3>
					</div>
				</div>
			</div>
		</div>
		</div>
		<div class="productWrap">
			<!-- <div class="head"></div> -->
			<!-- 左边窗口-->
			<div class="productLeft">
				<div class="productImg">
					<img class="goodImg" src="img/4.png" />
					<i class="icons"></i>
				</div>
			</div>
			<!-- 右边窗口-->
			<div class="shop_detail">
				<div class="shop_detail_pic">
					<div class="shop_detail_menu">
					<h1>樱花键盘</h1>
					<h2>$139</h2>
					<div class="detail_map">
						<i class="fa fa-map-market"></i>
						<span>北京 &nbsp; 北京市 &nbsp;<a href="" style="color: #ff6700;">&nbsp;修改</a></span><br />
						<span style="color: #ff6700; margin-left: 12px;">有现货</span>
					</div>
					<div class="shop_detail_much">
						<p>选择轴</p>
						<div class="detail_much_one" style="margin-right: 5px;">黑轴</div>
						<div class="detail_much_two">青轴</div>
						<div class="detail_much_three" style="margin-right: 5px;">红轴</div>
						<div class="detail_much_four">茶轴</div>
					</div>
						<div class="clear"></div>
					<div class="shop_detail_color">
						<p>选择颜色</p>
						<div class="detail_color_left detail_color_left_checked" style="margin-right: 5px;"><span style="background: #F6E6D8;"></span>金色</div>
						<div class="detail_color_left "><span style="background: #DDDDDD;"></span>灰色</div>
						<div class="detail_color_left " style="margin-right: 5px;"><span style="background: pink;"></span>粉色</div>
						<div class="detail_color_left "><span style="background: black;"></span>黑色</div>
					</div>
					<div class="clear"></div>
					<div class="shop_detail_bz">
						<div class="shop_detail_bz0">
							<p>选择提供保障服务</p>
							<a href="#">了解保障服务</a>
							<div class="clear"></div>
						</div>
						<div class="shop_detail_bz1" style="border-bottom: none;">
							<span class="fa fa-check-circle shop_detail_button"></span>
							
						</div>
						<div class="shop_detail_1">
							<p style="font-size: 18px; color: #333;">意外保障服务</p>
							<p>衣服意外损坏/</p>
							<b class="fa fa-check-square shop_detail_button"></b> &nbsp;我已阅读&nbsp;<a>&nbsp;服务条款&nbsp;</a>|<a>&nbsp;服务条款&nbsp;</a>
							<span data-val="99">99元</span>
						</div>
						<div class="shop_detail_cart" id="z">
							加入购物车
							<div class="love"></div>
						</div>
						<p><i class="fa fa-check-circle-o"></i> 7天无理由退货<i class="fa fa-check-circle-o"></i> 15天质量问题换货</p>
					</div>
				</div>
				</div>
			</div>
			<!-- <div class="shop_down"></div> -->
		</div>
		<script>
            z.onclick=function(){
                alert('添加购物车成功')
            }
        </script>
	</body>
</html>
